<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">文件上传</div>
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
				<template slot="code-js">{{ jsCode2 }}</template>
			</code-view>
			
			<div class="example-title">限制上传数量</div>
				<code-view>
					<template slot="code-html">{{ htmlCode3 }}</template>
				</code-view>
			</Demo>
			
			<div class="example-title">只读模式</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
				<template slot="code-js">{{ jsCode4 }}</template>
			</code-view>
			
			<div class="example-title">添加标签</div>
			<code-view>
				<template slot="code-html">{{ htmlCode5 }}</template>
				<template slot="code-js">{{ jsCode5 }}</template>
			</code-view>
			
			<div class="example-title">loading状态</div>
			<code-view>
				<template slot="code-html">{{ htmlCode6 }}</template>
				<template slot="code-js">{{ jsCode6 }}</template>
			</code-view>
			
			<div class="example-title">单次多选文件</div>
			<div class="example-sub-title quote">
				增加multiple属性，可以允许你一次选取多个文件
			</div>
			<code-view>
				<template slot="code-html">{{ htmlCode7 }}</template>
			</code-view>
			
			<div class="example-title">修改默认尺寸</div>
			<code-view>
				<template slot="code-html">{{ htmlCode8 }}</template>
			</code-view>
			
			<div class="example-title">&lt;gr-uploader&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain1" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="90">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="120">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="110">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="90">
						{{rowData.optionValues}}
					</gr-table-column>
					<gr-table-column label="默认值" width="70">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
			<div class="example-title">&lt;gr-uploader&gt;事件</div>
			<gr-table :width="800" :tableData="propertiesExplain2" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="事件名称" width="100">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="事件说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="事件回调参数" width="120">
						{{rowData.param}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="demo.html#/uploaddemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo,
			CodeView
		},
		data() {
			return {
				checklist1: ['php'],
				checklist2: ['java'],
				jsCode1: `import {Uploader} from 'gabriel-ui'
Vue.use(Uploader)`,
				htmlCode2: `<gr-uploader v-model="filelist1" />`,
				jsCode2: `export default {
	data() {
		return {
			filelist1: [
				{ url: 'http://xxx.com/img/mme.jpg' }, 
				{ url: 'http://xxx.com/img/girl.jpg' }
			]
		}
	}
}`,
				htmlCode3: `<gr-uploader v-model="filelist2" max-size="4" />`,
				htmlCode4: `<gr-uploader v-model="filelist3" readonly />`,
				jsCode4: `export default {
	data() {
		return {
			filelist3: [
				{ url: 'http://xxx.com/img/mme.jpg' }, 
				{ url: 'http://xxx.com/img/girl.jpg' }
				{ url: 'http://xxx.com/img/mme.jpg' }
			]
		}
	}
}`,
				htmlCode5: `<gr-uploader v-model="filelist4" />`,
				jsCode5: `export default {
	data() {
		return {
			filelist3: [
				{ url: 'http://xxx.com/img/mme.jpg', label:'默认头像' }, 
				{ url: 'http://xxx.com/img/girl.jpg' }
				{ url: 'http://xxx.com/img/mme.jpg' }
			]
		}
	}
}`,
				htmlCode6: `<gr-uploader v-model="filelist5" />`,
				jsCode6: `export default {
	data() {
		return {
			filelist5: [
				{ url: 'http://xxx.com/img/mme.jpg', status: 'uploading'}, 
				{ url: 'http://xxx.com/img/girl.jpg', status: 'failed' }
			]
		}
	}
}`,
				htmlCode7: `<gr-uploader v-model="filelist6" multiple />`,
				htmlCode8: `<gr-uploader v-model="filelist1" width="150px" height="100px" />`,
				propertiesExplain1: [
					{
						attrName: 'v-model',
						introduce: `已上传的文件列表`,
						type: 'Array',
						optionValues: '----',
						defaultValue: '[]'
					},
					{
						attrName: 'width',
						introduce: `组件尺寸的宽度, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '80px'
					},
					{
						attrName: 'height',
						introduce: `组件尺寸的高度, 单位px或rem均可`,
						type: 'String',
						optionValues: '----',
						defaultValue: '80px'
					},
					{
						attrName: 'accept',
						introduce: `允许的文件类型`,
						type: 'String',
						optionValues: 'MIME种类繁多，不在此列举',
						defaultValue: 'image/*'
					},
					{
						attrName: 'readonly',
						introduce: `只读模式下，只能展示已上传列表，不可添加删除`,
						type: 'Boolean',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'multiple',
						introduce: `是否可以一次选取多个文件`,
						type: 'Boolen',
						optionValues: 'true / false',
						defaultValue: 'false'
					},
					{
						attrName: 'max-size',
						introduce: `允许最大的文件上传数量`,
						type: 'Number',
						optionValues: '----',
						defaultValue: '9'
					},
				],
				propertiesExplain2: [
					{
						attrName: 'file-readed',
						introduce: `选取文件后的触发事件`,
						param: '在单文件选取模式下，参数为file对象，在多文件选取模式下，参数为files数组'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		}
	}
</script>

<style>
</style>
